---
title: 部署你的 Astro 站点至 Vercel
description: 如何使用 Vercel 将你的 Astro 网站部署到网络上。
sidebar:
  label: Vercel
logo: vercel
supports: ['ssr', 'static']
i18nReady: true
type: deploy
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';

你可以使用 [Vercel](http://vercel.com/) 零配置的将 Astro 站点部署到其全球边缘网络中。

本指南包括通过 Vercel 网站 UI 或 Vercel 的 CLI 将 Astro 站点部署到 Vercel 的相关说明。

## 项目配置

你的 Astro 项目可以作为静态站点或服务端渲染站点（SSR）部署到 Vercel。

### 静态站点

默认情况下，你的 Astro 项目是一个静态站点。你无需任何额外配置即可将静态 Astro 站点部署到 Vercel。

### 按需渲染适配器

使用以下 `astro add` 命令为你的 Astro 项目中添加 [Vercel 适配器](/zh-cn/guides/integrations-guide/vercel/) 以开启 [按需渲染](/zh-cn/guides/on-demand-rendering/)。此命令将安装适配器并同时自动对你的 `astro.config.mjs` 文件进行适当的配置。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add vercel
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add vercel
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add vercel
  ```
  </Fragment>
</PackageManagerTabs>

<ReadMore>如需手动安装或是查看关于配置选项的更多内容，例如使用 Vercel 的 Edge Function 来部署你项目中的 Astro 中间件，均可参见 [Vercel 适配器指南](/zh-cn/guides/integrations-guide/netlify/)。</ReadMore>

## 如何部署

你可以通过 Vercel 的网站 UI 或使用 Vercel 提供的官方 CLI（命令行界面）部署 Astro 站点到 Vercel。部署静态站点和按需渲染站点的过程相同。

### 通过网站 UI 部署

<Steps>
1. 将你的代码推送到你的在线 Git 存储库（GitHub、GitLab、BitBucket 等）。

2. [导入你的项目](https://vercel.com/new) 至 Vercel。

3. Vercel 将自动检测 Astro 项目并自动为其配置正确的设置。

4. 你的应用程序已部署完成了！（例如：[astro.vercel.app](https://astro.vercel.app/)）
</Steps>

在你的项目完成导入和部署后，所有后续内容推送到（生产分支外的）分支都将自动生成 [预览部署（Preview Deployments）](https://vercel.com/docs/concepts/deployments/environments#preview)，以及对生产分支（通常是名为“main”的分支）所做的任何更改都将自动被部署为 [生产部署（Production Deployment）](https://vercel.com/docs/concepts/deployments/environments#production)。

<ReadMore>详细请参考 Vercel 文档的 [Git 集成](https://vercel.com/docs/concepts/git)部分。</ReadMore>

### 通过 CLI 部署

<Steps>
1. 安装 [Vercel CLI](https://vercel.com/cli) 并运行 `vercel` 以进行部署。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install -g vercel
      vercel
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add -g vercel
      vercel
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn global add vercel
      vercel
      ```
      </Fragment>
    </PackageManagerTabs>

2. Vercel 将自动检测 Astro 项目并自动为其配置正确的设置。

3. 当被问及 `Want to override the settings? [y/N]`（想要覆盖配置吗？），选择 `N`（No）。

4. 你的应用程序已部署完成了！（例如：[astro.vercel.app](https://astro.vercel.app/)）
</Steps>

### 使用 `vercel.json` 的项目配置

你可以使用 `vercel.json` 来覆盖 Vercel 的默认行为并配置其他设置。例如，你可以在部署时为 HTTP 响应附加标头。

<ReadMore>详细请参考 Vercel 文档的 [项目配置](https://vercel.com/docs/project-configuration)。</ReadMore>
